<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-descriptions ant-pro-descriptions"
    >
      <div
        class="ant-descriptions-header"
      >
        <div
          class="ant-descriptions-title"
        >
          dataSource and columns
        </div>
        <div
          class="ant-descriptions-extra"
        >
          <a
            rel="noopener noreferrer"
            target="_blank"
          >
            链路
          </a>
          <a
            rel="noopener noreferrer"
            target="_blank"
          >
            报警
          </a>
          <a
            rel="noopener noreferrer"
            target="_blank"
          >
            查看
          </a>
        </div>
      </div>
      <div
        class="ant-descriptions-view"
      >
        <table>
          <tbody>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    文本
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span
                      aria-describedby="test-id"
                      aria-label="这是一段文本columns"
                      class="ant-typography ant-typography-ellipsis"
                      style="width: 100%; margin: 0px; padding: 0px;"
                      title=""
                    >
                      这是一段文本columns
                      <button
                        aria-describedby="test-id"
                        aria-label="复制"
                        class="ant-typography-copy"
                        type="button"
                      >
                        <span
                          aria-label="copy"
                          class="anticon anticon-copy"
                          role="img"
                        >
                          <svg
                            aria-hidden="true"
                            data-icon="copy"
                            fill="currentColor"
                            focusable="false"
                            height="1em"
                            viewBox="64 64 896 896"
                            width="1em"
                          >
                            <path
                              d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
                            />
                          </svg>
                        </span>
                      </button>
                    </span>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    状态
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span
                      class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
                    >
                      <span
                        class="ant-badge-status-dot ant-badge-status-default"
                      />
                      <span
                        class="ant-badge-status-text"
                      >
                        全部
                      </span>
                    </span>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    状态2
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    open
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    时间
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    2020-08-09
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    money
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span>
                      ¥1,212,100.00
                    </span>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    百分比
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span>
                      100.00%
                    </span>
                  </span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        ProDescriptions DataSource 数据源 Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 描述列表标题
        </li>
        <li>
          <strong>
            dataSource
          </strong>
          : 数据源对象，直接提供数据
        </li>
        <li>
          <strong>
            columns
          </strong>
          : 列配置数组，定义每列的属性
        </li>
      </ul>
      <h4>
        DataSource 数据源配置：
      </h4>
      <ul>
        <li>
          <strong>
            对象格式
          </strong>
          : 直接提供数据对象
        </li>
        <li>
          <strong>
            字段映射
          </strong>
          : 通过 dataIndex 映射到数据字段
        </li>
        <li>
          <strong>
            静态数据
          </strong>
          : 适合展示静态或已知数据
        </li>
        <li>
          <strong>
            性能优势
          </strong>
          : 无需异步请求，性能更好
        </li>
      </ul>
      <h4>
        Column 配置项：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 列标题
        </li>
        <li>
          <strong>
            key
          </strong>
          : 列的唯一标识
        </li>
        <li>
          <strong>
            dataIndex
          </strong>
          : 数据字段名，对应 dataSource 中的字段
        </li>
        <li>
          <strong>
            ellipsis
          </strong>
          : 是否显示省略号
        </li>
        <li>
          <strong>
            copyable
          </strong>
          : 是否可复制
        </li>
        <li>
          <strong>
            valueType
          </strong>
          : 值类型，决定如何渲染
        </li>
        <li>
          <strong>
            valueEnum
          </strong>
          : 枚举值配置
        </li>
        <li>
          <strong>
            render
          </strong>
          : 自定义渲染函数
        </li>
      </ul>
      <h4>
        ValueType 类型：
      </h4>
      <ul>
        <li>
          <strong>
            select
          </strong>
          : 选择框，配合 valueEnum 使用
        </li>
        <li>
          <strong>
            date
          </strong>
          : 日期格式
        </li>
        <li>
          <strong>
            money
          </strong>
          : 金额格式
        </li>
        <li>
          <strong>
            percent
          </strong>
          : 百分比格式
        </li>
        <li>
          <strong>
            option
          </strong>
          : 操作按钮
        </li>
      </ul>
      <h4>
        ValueEnum 枚举配置：
      </h4>
      <ul>
        <li>
          <strong>
            text
          </strong>
          : 显示的文本
        </li>
        <li>
          <strong>
            status
          </strong>
          : 状态类型，影响显示样式
        </li>
        <li>
          <strong>
            支持状态
          </strong>
          : Default, Error, Success, Processing
        </li>
      </ul>
      <h4>
        Render 自定义渲染：
      </h4>
      <ul>
        <li>
          <strong>
            函数返回
          </strong>
          : 返回 React 节点数组
        </li>
        <li>
          <strong>
            操作按钮
          </strong>
          : 常用于渲染操作链接或按钮
        </li>
        <li>
          <strong>
            样式控制
          </strong>
          : 完全控制渲染内容的样式
        </li>
      </ul>
      <h4>
        混合使用特点：
      </h4>
      <ul>
        <li>
          <strong>
            Columns 配置
          </strong>
          : 通过 columns 数组定义列
        </li>
        <li>
          <strong>
            Item 组件
          </strong>
          : 同时支持 ProDescriptions.Item
        </li>
        <li>
          <strong>
            优先级
          </strong>
          : Item 组件会覆盖 columns 中的配置
        </li>
      </ul>
      <h4>
        与 Request 的区别：
      </h4>
      <ul>
        <li>
          <strong>
            数据来源
          </strong>
          : dataSource 直接提供数据，request 异步获取
        </li>
        <li>
          <strong>
            使用场景
          </strong>
          : dataSource 适合静态数据，request 适合动态数据
        </li>
        <li>
          <strong>
            性能差异
          </strong>
          : dataSource 性能更好，无需网络请求
        </li>
        <li>
          <strong>
            错误处理
          </strong>
          : dataSource 无需处理请求错误
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            静态数据
          </strong>
          : 展示已知的静态数据
        </li>
        <li>
          <strong>
            配置展示
          </strong>
          : 展示系统配置信息
        </li>
        <li>
          <strong>
            表单预览
          </strong>
          : 展示表单提交的数据
        </li>
        <li>
          <strong>
            详情页面
          </strong>
          : 展示对象详细信息
        </li>
      </ul>
      <h4>
        最佳实践：
      </h4>
      <ul>
        <li>
          <strong>
            数据准备
          </strong>
          : 确保 dataSource 包含所有需要的字段
        </li>
        <li>
          <strong>
            列配置
          </strong>
          : 使用 columns 配置批量定义列
        </li>
        <li>
          <strong>
            类型匹配
          </strong>
          : 选择合适的 valueType 展示数据
        </li>
        <li>
          <strong>
            性能优化
          </strong>
          : 对于静态数据优先使用 dataSource
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>